<md-card>

    <div ng-if="alert.data.articles[0].image.src">
        <img alt="image" ng-src-cache="{{alert.data.articles[0].image.src | mediaScreen }}/">
    </div>

    <md-card-content>
        <div layout="row" layout-padding>

            <div>
                <a ng-click="alert.gotoShop()">
                    <img ng-src-cache="{{alert.data.shop.picto.src | mediaScreen }}" alt="{{alert.data.shop.name}}">
                </a>
            </div>

            <div layout layout-align="start center" layout-fill layout-padding>
                <div>
                    <md-icon md-svg-src="/assets/icons/yellow/angle-double-right.svg" class="md-medium"></md-icon>
                </div>
                <md-button ng-click="alert.gotoShop()" aria-label="Shop" flex text-left class="md-accent alert-item-title">
                    <strong>{{alert.data.shop.name}}</strong><span hide-sm>@{{alert.data.shop.login}}</span>
                </md-button>

                <div ng-if="alert.data.distance" layout>
                    <md-icon md-svg-src="/assets/icons/grey/map-marker.svg" class="md-small"></md-icon>
                    <span>{{alert.data.distance}}</span>
                </div>
                <div ng-if="alert.data.shop.location.neighborhood" class="md-small">
                    <span>{{alert.data.shop.location.neighborhood}}</span>
                </div>
            </div>
        </div>

        <div layout layout-wrap layout-fill layout-align="start center">
            <md-button ng-href="#search/{{alert.data.type.name}}" aria-label="Type" class="md-accent md-hue-2 md-small">
                <span>{{alert.data.type.name}}</span>
            </md-button>
            <md-button ng-href="#search/{{alert.data.shop.category.name}}" aria-label="Category" class="md-accent md-hue-2 md-small">
                <span class="small">{{alert.data.shop.category.name}}</span>
            </md-button>
            <md-button ng-href="#search/{{alert.data.shop.location.city}}" aria-label="City" class="md-accent md-hue-2 md-small">
                <span class="small">{{alert.data.shop.location.city}}</span>
            </md-button>
        </div>

        <div layout layout-padding ng-bind-html="alert.data.articles[0].content | linkify" class="nolink"></div>

        <div layout class="reporting">

            <div layout-padding>
                <md-icon md-svg-src="/assets/icons/grey/thumbs-o-up.svg" class="md-small"></md-icon>
                <span>{{alert.data.users.like.total}}</span>
            </div>
            <div layout-padding>|</div>
            <div layout-padding>
                <md-icon md-svg-src="/assets/icons/grey/user.svg" class="md-small"></md-icon>
                <span>{{alert.data.users.subscribers.total}}</span>
            </div>
                    
            <span flex></span>

            <md-button ng-click="alert.like()" aria-label="Like" layout-padding>
                <md-icon md-svg-src="/assets/icons/pink/heart-o.svg" class="md-medium"></md-icon>
            </md-button>
                    
        </div>

    </md-card-content>

</md-card>

<md-card ng-repeat="article in alert.data.articles | slice: 1">

    <img ng-if="article.image" alt="image" ng-src-cache="{{article.image.src | mediaScreen}}">
            
    <md-card-content>
        <div layout layout-padding ng-bind-html="article.content | linkify" class="nolink"></div>
    </md-card-content>
</md-card>